<template>
  <div>
    <h1>声明周期等</h1>
    <router-link to="/category">分类页</router-link>
    <router-link :to="{ name: 'category', query: { pid: 111 } }"
      >分类页</router-link
    >
    <button @click="turnCate">去到分类页</button>
    <button @click="turnCa">去到分类replace</button>
    <h1>x轴位置是:{{ x }}</h1>
    <h1>y轴位置是:{{ y }}</h1>
    <h1 ref="common">你好</h1>
    <fly-com
      mysex="男"
      myage="18"
      shengao="178"
      tizhong="70"
      @sendmsg="getMsg"
      :myhobby="'永杰无间'"
      :myname="myname"
    >
      <template #home>
        <h1>我是首页自定义内容</h1>
        <h1>哈哈哈哈</h1>
      </template>
      <template #cart>
        <h1>我是购物车购物车</h1>
        <h1>one two three go!</h1>
      </template>
    </fly-com>
  </div>
</template>
<script lang="ts">
import flyCom from './flyCom.vue'
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  nextTick,
  defineComponent
} from 'vue'
import mouseHook from './hooks/mouseHook'
import { useRouter, useRoute } from 'vue-router'
export default {
  components: { flyCom },
  setup (props: any) {
    // ref获取页面中的元素
    let common = ref<HTMLElement | null>(null)
    console.log(common.value) //获取到的元素
    nextTick(() => {
      ;(common.value as HTMLElement).style.color = 'red'
    })
    onBeforeMount(() => {})
    onMounted(() => {})
    // 获取鼠标位置
    var xyObj = mouseHook()
    let myname = ref('德莱厄斯')

    // 接受子组件传来的数据函数
    let getMsg = (str: any) => {
      console.log(str.value)
    }
    // useRouter() vue3中编程式路由api
    let router = useRouter()
    // 跳转分类页
    let turnCate = () => {
      router.push({
        name: 'category',
        query: {
          cid: '9527'
        }
      })
    }
    // 跳转
    let turnCa = () => {
      router.replace({
        name: 'category',
        query: {
          cid: '198'
        }
      })
    }
    return {
      ...xyObj,
      common,
      myname,
      getMsg,
      turnCate,
      turnCa
    }
  }
}
</script>
